<%--
User: 24390 Date: 2021/1/8 Time: 20:13
--%>
<%--<html>--%>
<%--<head>--%>
<%--    <title>Title</title>--%>
<%--    <link rel="stylesheet" href="static/css/bootstrap.css">--%>
<%--    <script src="static/js/bootstrap.js"></script>--%>
<%--    <script src="static/js/jquery-1.12.4.min.js"></script>--%>
<%--</head>--%>
<%--<body>--%>
<%--<button class="btn btn-success">按钮</button>--%>
<%--</body>--%>
<%--</html>--%>

<%--<jsp:forward page="/emps"></jsp:forward>--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
User: 24390 Date: 2021/1/9 Time: 22:22
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" isErrorPage="true" %>
<html>
<head>
    <title>员工列表</title>
    <link rel="stylesheet" href="static/css/bootstrap.css">
    <script src="static/js/jquery-1.9.1.min.js"></script>
    <script src="static/js/bootstrap.js"></script>
    <style>

    </style>
</head>
<body>

<!-- 员工添加Modal -->
<div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">新增员工</h4>
            </div>
            <div class="modal-body">
<%--                员工表单--%>
    <form id="add_form" class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-2 control-label">员工姓名</label>
            <div class="col-sm-10">
                <input name="empName" type="text" class="form-control" id="empName_add_input" placeholder="empName">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">员工邮箱</label>
            <div class="col-sm-10">
                <input name="email" type="email" class="form-control" id="email_add_input" placeholder="email">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">性别</label>
            <div class="col-sm-10">
                <label class="radio-inline">
                    <input type="radio" name="gender" id="gender1_add_input" value="M" checked="checked"> 男
                </label>
                <label class="radio-inline">
                    <input type="radio" name="gender" id="gender0_add_input" value="F"> 女
                </label>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">企业部门</label>
            <div class="col-sm-4">
<%--                部门提交部门id即可--%>
                <select name="dId" class="form-control" id="dept_add_select">

                </select>
            </div>
        </div>
        <div class="form-group">
            <div id="successAndError" class="col-sm-4">
                <span id="jsrSpan">?</span>
            </div>
        </div>
    </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button id="emp_save_btn" type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>

<%--员工修改的modal--%>
<div class="modal fade" id="empUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">修改员工信息</h4>
            </div>
            <div class="modal-body">
                <%--                员工表单--%>
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">员工姓名</label>
                        <div class="col-sm-10" >
                            <input name="empName" type="text"  id="empName_update_static" disabled="disabled">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">员工邮箱</label>
                        <div class="col-sm-4">
                            <input name="email" type="email" class="form-control" id="email_update_input" placeholder="email"><span id="update_email_patt_msg"></span>
                        </div>

                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">性别</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="gender1_update_input" value="M">男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="gender0_update_input" value="F">女
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">企业部门</label>
                        <div class="col-sm-4">
                            <%--                部门提交部门id即可--%>
                            <select name="dId" class="form-control" id="dept_update_select">

                            </select>
                        </div>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button id="emp_update_btn" type="button" class="btn btn-primary">更新</button>
            </div>
        </div>
    </div>
</div>

<div class="container">
    <%--    标题--%>
    <div class="row">
        <div class="col-md-12">
            <h1>SSM-CRUD</h1>
        </div>
    </div>

    <%--    按钮--%>
    <div class="row">
        <%--            共12列，占四列，向右偏移四列 *4* 4 *4*--%>
        <div class="col-md-4 col-md-offset-8">
            <button class="btn btn-success" id="emp_add_modal_btn">添加员工</button>
            <button class="btn btn-success" id="emp_delete_all_btn">删除全部</button>
        </div>
    </div>
    <%--    表格数据--%>
    <div class="row">
        <div class="col-md-12">
            <table class="table table-hover" id="emps_table">
                <thead>
                    <tr>
                        <th><input type="checkbox" id="check_all"></th>
                        <th>empId</th>
                        <th>empName</th>
                        <th>gender</th>
                        <th>email</th>
                        <th>deptName</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
    <%--    分页信息--%>
    <div class="row">
        <%--            分页条信息--%>
        <div class="col-md-6 col-md-offset-2" id="page_inv_area">

        </div>
        <%--            分页文字信息--%>
        <div class="col-md-4" id="page_info_area">

        </div>
    </div>
</div>
<script>
<%--    页面加载完后，直接发送ajax请求，要到分页数据--%>
    // 定义全局变量总记录数 方便前往最后一页=总记录数。。
    var totalResult;
    // 定义全局当前页，随时获取当前页为第几页
    var currentPageNum;
    $(function () {
        // 页面加载完默认去第一页
        to_page(1);
    });
    function build_emps_table(data) {
        // 清空#emps_table tbody
        $("#emps_table tbody").empty();
        var emps = data.map.pageInfo.list;
        $.each(emps,function (index,item) {
            // alert(item.empName);
            var checkBox = $("<td><input type='checkbox' class='check_item'/></td>");
            var empId = $("<td></td>").append(item.empId);
            var empName = $("<td></td>").append(item.empName);
            var gender = $("<td></td>").append(item.gender=='0'?"女":"男");
            var email = $("<td></td>").append(item.email);
            var department = $("<td></td>").append(item.department.deptName);
            var editBtn = $("<button></button>").addClass("btn btn-warning btn-sm edit_btn")
            .append($("<span></span>").addClass("glyphicon glyphicon-pencil"))
            .append("编辑");







            // 为编辑按钮添加一个自定义属性，表示当前员工id
            editBtn.attr("edit_id",item.empId);

            var deleBtn = $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
            .append($("<span></span>").addClass("glyphicon glyphicon-remove"))
            .append("删除");



            // 为删除按钮添加一个自定义的属性来表示当前删除的员工id
            deleBtn.attr("delete_btn",item.empId);

            var btn = $("<td></td>").append(editBtn).append(deleBtn);


            $("<tr></tr>")
                .append(checkBox)
                .append(empId) // append是追加
                .append(empName)
                .append(gender)
                .append(email)
                .append(department)
                .append(btn)
                .appendTo("#emps_table tbody");
        });
    }


    function build_page_nav(data) {
        $("#page_inv_area").empty();
        var firstPage = $("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
        var prePage = $("<li></li>").append($("<a></a>").append("&laquo;").attr("href","#"));
        if (data.map.pageInfo.hasPreviousPage == false){
            firstPage.addClass("disabled");
            prePage.addClass("disabled");
        }else {
            // 为首页、前一页添加点击事件
            firstPage.click(function () {
                to_page(1);
            });
            prePage.click(function () {
                to_page(data.map.pageInfo.pageNum-1);
            });
        }

        var nextPage = $("<li></li>").append($("<a></a>").append("&raquo;").attr("href","#"));
        var lastPage = $("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
        var ul = $("<ul></ul>").addClass("pagination")
        if (data.map.pageInfo.hasNextPage == false){
            nextPage.addClass("disabled");
            lastPage.addClass("disabled");
        }else {
            // 为下一页、末页添加点击事件
            nextPage.click(function () {
                to_page(data.map.pageInfo.pageNum+1);
            });
            lastPage.click(function () {
                to_page(data.map.pageInfo.pages)
            });
        }

        ul.append(firstPage).append(prePage);
        // 1,2,3,4,5
        $.each(data.map.pageInfo.navigatepageNums,function (index,item) {
            var numLi = $("<li></li>").append($("<a></a>").append(item));
            if (data.map.pageInfo.pageNum == item){
                numLi.addClass("active");
            }
            // 绑定点击事件
            numLi.click(function () {
                // 调用方法
                to_page(item);
            });
            ul.append(numLi);
        });

        ul.append(nextPage).append(lastPage);

        var navEle = $("<nav></nav>").append(ul);
        navEle.appendTo("#page_inv_area")
    }
    function build_page_info(data) {
        $("#page_info_area").empty();
        $("#page_info_area").append("当前"+data.map.pageInfo.pageNum+"页,\n" +
            "            总"+data.map.pageInfo.pages+"页,\n" +
            "            共"+data.map.pageInfo.total+"条记录");
        totalResult = data.map.pageInfo.total;
        currentPageNum = data.map.pageInfo.pageNum;
    }

    function to_page(pageNo) {
        $.ajax({
            url:"/emps",
            data:"pageNo="+pageNo,
            type:"GET",
            success:function (data) {
                // console.log(data)
                // 1.解析并显示员工数据
                build_emps_table(data);
                // 2.解析并显示分页条
                build_page_nav(data);
                // 3.解析并显示分页信息
                build_page_info(data);
            }
        });
    }

        // 新增员工按钮点击事件
    $("#emp_add_modal_btn").click(function () {
        // 发送ajax请求，查询部门信息，以便显示在下拉列表中
        getDept("#dept_add_select");
        // 弹出模态框
        $("#empAddModal").modal({
            backdrop:'static'
        });
    });
    // 查询出部门信息显示在下拉列表中
    function getDept(element) {
        $(element).empty();
        $.ajax({
            url: "/depts",
            data: "",
            type: "GET",
            success:function (data) {
                // console.log(data) // {"code":100,"msg":"处理成功","map":{"depts":[{"deptId":1,"deptName":"开发部"},{"deptId":2,"deptName":"测试部"}]}}
                $.each(data.map.depts,function () {
                    var optionEle = $("<option></option>").append(this.deptName).attr("value",this.deptId);
                    optionEle.appendTo(element);
                });
            }
        });
    }

    // 点击保存，保存员工方法
    $("#emp_save_btn").click(function () {
        // 提交表单数据给服务器，前端数据校验
        // if (!validate_add_form()) {
        //     return false;
        // }
        // 发送ajax请求保存员工
        $.ajax({
           url:"/emp",
           type:"POST",
           // 请求数据 是表单每一项具体输入信息，使用serialize
           data:$("#add_form").serialize(),
            success:function (data) {
               if (data.code == 100){
                   // 关闭模态框
                   $("#empAddModal").modal('hide');
                   $("#jsrSpan").text(""); // 修复再次弹出模态框仍有上次错误提示信息bug
                   // 发送ajax前往最有一页查询插入的内容,总记录数肯定比总页码大
                   to_page(totalResult);
               }else {
                   // 否则显示失败信息
                   console.log(data);//{code: 200, msg: "处理失败", map: {…}}
                   if (undefined != data.map.errorFields.email){
                       // 显示邮箱的错误信息
                       show_validate_msg("#successAndError","error",data.map.errorFields.email);
                   }
                   if (undefined != data.map.errorFields.empName){
                       // 显示名字的错误信息
                       show_validate_msg("#successAndError","error",data.map.errorFields.empName);
                   }
               }

            }
        });
    });

    // 校验表单数据
    function validate_add_form() {

    }
    //显示校验结果的提示信息
    function show_validate_msg(ele,status,msg){
        //清除当前元素的校验状态
        // $(ele).parent().removeClass("successAndError");
        // $("#jsrSpan").text(msg);
        if("success"== status){
            // $(ele).parent().addClass("has-success");
            $("#jsrSpan").text(msg);
        }else if("error" == status){
            // $(ele).parent().addClass("has-error");
            $("#jsrSpan").text(msg);
        }
    }

    // 为编辑按钮绑定单击事件失效的问题：页面加载完成之后执行js代码，显示的所有数据都是发送的ajax请求拿到的json数据，一般绑定方法是失效的
    // 是在按钮创建之前绑定了点击事件，故失效
    // 使用.live()、on()绑定单击事件
    $(document).on("click",".edit_btn",function () { // 新版绑定点击事件方法
        // 查出下拉菜单部门信息、员工信息
        getDept("#dept_update_select");
        getEmp($(this).attr("edit_id"));
        // 将员工id传给模态框的更新按钮
        $("#emp_update_btn").attr("edit_id",$(this).attr("edit_id"));
        // 弹出模态框
        $("#empUpdateModal").modal({
            backdrop: 'static'
        });
    });

    // 发送ajax请求查询员工信息
    function getEmp(id) {
        $.ajax({
           url:"/emp/"+id,
            type:"GET",
            success:function (data) {
                console.log(data);
                var empData = data.map.emp;
                $("#empName_update_static").val(empData.empName);
                $("#email_update_input").val(empData.email);
                $("#empUpdateModal input[type=radio]").val([empData.gender]);
                $("#empUpdateModal select").val([empData.dId]);
            }
        });
    }

    $("#emp_update_btn").click(function () {
        var emailText = $("#email_update_input").val();
        var emailPatt = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
        if (!emailPatt.test(emailText)){
            $("#update_email_patt_msg").text("邮箱格式有误");
            return false;
        }
        $.ajax({
           url:"/emp/"+$(this).attr("edit_id"),
           // type:"POST",
           type:"PUT",
            // data:$("#empUpdateModal form").serialize()+"&_method=PUT",
            data:$("#empUpdateModal form").serialize(),
            // 在web.xml中配置过滤器HttpPutFormContentFilter
            success:function (data) {
                // alert(data.msg)
                // 关闭模态框
                $("#empUpdateModal").modal("hide");
                // 回到本页面,重新发送ajax请求获取到本页数据
                to_page(currentPageNum);
            }
        });
    });

    $(document).on("click",".delete_btn",function () {
    //    弹出是否确认删除对话框
        var empName = $(this).parents("tr").find("td:eq(2)").text();
        var empId = $(this).attr("delete_btn");
        if (confirm("你确认要删除【"+empName+"】吗")){
            // 确认，发送ajax请求
            $.ajax({
                url:"/emp/"+empId,
                type:"DELETE",
                success:function (data) {
                    to_page(currentPageNum);
                }
            });
        }
    });

    $("#check_all").click(function () {
        // attr获取原生的dom属性的值时会出现undefined情况，推荐使用prop获取dom值
        // this就是check_all全选的这个多选框含义
        $(".check_item").prop("checked",$(this).prop("checked"));
    });
    $(document).on("click",".check_item",function () {
        // 判断当前选择的元素个数是否为5
        var flag = $(".check_item:checked").length == $(".check_item").length;
        $("#check_all").prop("checked",flag)
    });

    $("#emp_delete_all_btn").click(function () {
        var empNames = "";
        var empIds = "";
        $.each($(".check_item:checked"),function () {
            // 组装员工名字符串
            empNames += $(this).parents("tr").find("td:eq(2)").text()+",";
            // 组装员工名字符串
            empIds += $(this).parents("tr").find("td:eq(1)").text()+"-";

        });
        // 去除多余逗号
         empNames = empNames.substring(0,empNames.length-1);
         // 去除多余-
         empIds = empIds.substring(0,empIds.length-1);
        if (confirm("确认删除【"+empNames+"】员工么？")){
            // 发送ajax请求删除全部
            $.ajax({
                url:"/emp/"+empIds,
                type:"DELETE",
                success:function (data) {
                    to_page(currentPageNum);
                }
            })
        }
    });
</script>
</body>
</html>
